import React from 'react'
import ReactDOM from 'react-dom'
import {NavBar,Icon,PullToRefresh,ListView,Button,List} from 'antd-mobile'
import axios from '../../axios/index'
const Item = List.Item;
const Brief = Item.Brief;
export default class RechargeRecord extends React.Component{

    constructor(props){
        super(props);
        const dataSource = new ListView.DataSource({  //这个dataSource有cloneWithRows方法
            rowHasChanged: (row1, row2) => row1 !== row2,
          });   
          this.rData=[]
          this.pageNo = 1 //定义分页信息
          this.state = {
            dataSource,
            refreshing: true,
            isLoading: true,
            height: document.documentElement.clientHeight,
            useBodyScroll: false,
            hasMore: true
          };
      
    }
    componentDidUpdate() {
        if (this.state.useBodyScroll) {
          document.body.style.overflow = 'auto';
        } else {
          document.body.style.overflow = 'hidden';
        }
    }
     componentDidMount() {
        const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
        this.genData(1).then((value)=>{
          this.rData=[...value];
          this.setState({
            dataSource: this.state.dataSource.cloneWithRows(this.rData),
          });
        });
        this.setState({
          height: hei,
          isLoading:false
        });
      }
      
      genData(pageNo){  //请求数据的方法
       return axios.ajax({
            url:'/api/v1/customer_service/tps/rechargeRecords',
            method:'get',
            data:{
                page:pageNo
            }
        }).then((res)=>{
          if(res.code===0){
            this.setState({
              isLoading: false,
              refreshing: false,
            });
            if(res.data.data){              
              if(res.data.data.length<=0){
                this.setState({
                  hasMore: false
                });
              }
              return res.data.data;
            }else{
              
            }           
          }           
        });                                                                           
      }
      onRefresh = () => {
        this.setState({ refreshing: true, isLoading: true });
        this.genData(1).then((value)=>{
          this.rData=[...value];
          this.setState({
            dataSource: this.state.dataSource.cloneWithRows(this.rData),
          });
        });
      };
      onEndReached =(event) => {
        if (!this.state.isLoading && !this.state.hasMore) {
          console.log('到达底部没有数据了');
          return;
        }   //如果this.state.hasMore为false，说明没数据了，直接返回
        this.setState({ isLoading: true });
        this.genData(++this.pageNo).then((value)=>{
          this.rData.push(...value);
          this.setState({
            dataSource: this.state.dataSource.cloneWithRows(this.rData),
          });
        });
      };
    
    render(){
    //这里就是个渲染数据，rowData就是每次过来的那一批数据，已经自动给你遍历好了，rouID可以作为key值使用，直接渲染数据即可
    const row = (rowData, sectionID, rowID) => {
        return (
          <List renderHeader={() => ''} className="my-list">
            <Item multipleLine extra={rowData.amount}>
            { rowData.phone_number} <Brief> {rowData.updated_at}</Brief>
            </Item>
          </List>
        );
    };

        return(
            <div>
                <NavBar
                    mode="light"
                    leftContent="返回"
                    icon={<Icon type="left" />}
                    onLeftClick={() =>{
                        const {history}=this.props;
                        history.push({pathname:'/mine'});
                    }}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >充值记录</NavBar>

            <ListView
              key={this.state.useBodyScroll ? '0' : '1'}
              ref={el => this.lv = el}
              dataSource={this.state.dataSource}
              renderFooter={    //renderFooter就是下拉时候的loading效果，这里的内容可以自己随需求更改
                () => (
                      <div style={{ padding: 30, textAlign: 'center' }}>
                        {this.state.isLoading ? '加载中...' : (this.state.hasMore?'加载完成':'没有更多数据了')}
                      </div>
                    )
              }
              renderRow={row}   //渲染你上边写好的那个row
              useBodyScroll={this.state.useBodyScroll}
              style={this.state.useBodyScroll ? {} : {
                height: this.state.height
              }}
              pullToRefresh={<PullToRefresh
                refreshing={this.state.refreshing}
                onRefresh={this.onRefresh}
              />}
              onEndReached={this.onEndReached}
              onEndReachedThreshold={30}
              pageSize={15}    //每次下拉之后显示的数据条数
            />
            </div>
        );
    }
}